<template>
  <view class="order-detail app-container" style="overflow: hidden">
    <view class="flex-1" style="overflow-y: auto">
      <view class="bg-white p-40">
        <view class="field mb-20">
          <view class="label">售后单编号</view>
          <view class="value">{{ detail.code }}</view>
        </view>
        <view class="field mb-20">
          <view class="label">申请时间</view>
          <view class="value">{{ detail.created_at }}</view>
        </view>
        <view class="field mb-20">
          <view class="label">类型</view>
          <view class="value">{{ formatType(detail.type) }}</view>
        </view>
        <view class="field mb-20">
          <view class="label">理由</view>
          <view class="value">{{ formatReason(detail.reason) }}</view>
        </view>
        <view class="field mb-20">
          <view class="label">备注</view>
          <view class="value">{{ detail.remark }}</view>
        </view>
        <!-- <view class="field">
        <view class="label">支付方式</view>
        <view class="value">{{ detail.code }}</view>
      </view> -->
      </view>
      <view class="main p-20">
        <!-- <view class="my-card mb-20" v-if="detail.status == 'canceled'">
          <u-icon
            name="info-circle-fill"
            label="取消原因"
            size="24"
            label-size="18"
          ></u-icon>
          <u-gap height="10"></u-gap>
          <u-text type="info" text="超时未支付"></u-text>
        </view> -->

        <view class="order-card">
          <view class="order-card-top">
            <view class="top-title">
              <up-icon name="bag-fill" size="22" color="#ffffff"></up-icon>
              <view class="title">订货订单</view>
            </view>
            <view class="goods-qty">{{ formatGoodsCountText }}</view>
          </view>
          <view class="line-list">
            <block v-for="(item, index) in detail.order.lines" :key="index">
              <view
                class="line-item"
                v-if="(!moreGoods && index <= 2) || moreGoods"
              >
                <up-image
                  width="80"
                  height="80"
                  radius="10"
                  :src="item.product.image_url"
                  :lazy-load="true"
                ></up-image>
                <view class="line-item-right">
                  <view class="goods-name">{{ item.product.name }}</view>
                  <view class="goods-qty">x {{ item.quantity }}</view>
                  <view class="goods-price">
                    <text class="price">￥{{ item.product.sale_price }}</text>
                    <text class="unit">/{{ item.product.uom.name }}</text>
                  </view>
                </view>
              </view>
            </block>
          </view>
          <view
            class="more-btn"
            v-if="detail.order.lines.length > 3"
            @click="onMoreGoods"
          >
            <text>{{ moreGoods ? "收起" : "查看全部" }}</text>
            <view class="more-icon" :class="{ open: moreGoods }">
              <up-icon name="arrow-down" size="14" color="#3cb9ef"></up-icon>
            </view>
          </view>
          <view class="order-notes">
            <view class="notes-title">订单备注</view>
            <up-textarea
              v-model="detail.remark"
              placeholder="留言选填，100字以内"
              disabled
              count
              maxlength="100"
              height="100"
            ></up-textarea>
          </view>
        </view>
      </view>
    </view>

    <view v-if="detail.status == 'pending'" class="actions">
      <u-button type="primary" @click="handleCancelOrder">取消售后</u-button>
    </view>
  </view>
</template>

<script setup>
import { onShow } from "@dcloudio/uni-app";
import { reactive, ref, computed } from "vue";
import { useStore } from "vuex";

const store = useStore();

const props = defineProps({
  id: String,
});

const moreGoods = ref(false);

const payLoading = ref(false);

const detail = reactive({
  code: "",
  created_at: "",
  id: 0,
  is_active: true,
  order: {
    lines: [],
  },
  reason: 0,
  refund_amount: "",
  remark: "",
  saleorderserviceline_set: [],
  saleorderservicetimeline_set: [],
  status: "",
  type: "",
  updated_at: "",
});

const typeOptions = [
  { label: "退货退款", value: "return" },
  { label: "仅退款", value: "refund" },
  { label: "换货", value: "replace" },
  { label: "补发商品", value: "reissue" },
];

const reasonOptions = [
  { label: "商品质量问题", value: 1 },
  { label: "商品与页面描述不符", value: 2 },
  { label: "商品破损/包装问题", value: 3 },
  { label: "少件/未收到货", value: 4 },
  { label: "发错货", value: 5 },
  { label: "价格问题", value: 6 },
  { label: "假冒品牌", value: 7 },
  { label: "其他原因", value: 8 },
];

function formatType(type) {
  const c = typeOptions.find((i) => i.value == type);
  if (c) {
    return c.label;
  }
  return "";
}

function formatReason(reason) {
  const c = reasonOptions.find((i) => i.value == reason);
  if (c) {
    return c.label;
  }
  return "";
}

const formatGoodsCountText = computed(() => {
  let totalCount = 0;
  detail.order.lines.forEach((i) => {
    totalCount += i.quantity;
  });
  return `${detail.order.lines.length}种${totalCount}件`;
});

function onMoreGoods() {
  moreGoods.value = !moreGoods.value;
}

async function fetchAftercareDetail() {
  const response = await store.dispatch("fetchAftercareDetail", props.id);
  if (response) {
    Object.assign(detail, response);
  }
  return response;
}

// 取消订单
async function handleCancelOrder() {
  uni.showModal({
    title: "提示",
    content: "是否继续取消此订单",
    success: async (res) => {
      if (res.confirm) {
        const response = await store.dispatch("fetchCancelAftercare", props.id);
        if (response) {
          uni.$u.toast("已取消");
          fetchAftercareDetail();
        }
      }
    },
  });
}

onShow(() => {
  fetchAftercareDetail();
});
</script>

<style lang="scss" scoped>
.field {
  display: flex;

  .label {
    width: 6em;
    color: $u-info;
  }
}

.order-group-box {
  border-radius: 20rpx;
  overflow: hidden;
  background-color: #fff;

  .title {
    background-color: $u-primary;
    padding: 20rpx;
  }
}

.order-card {
  border-radius: 20rpx;
  overflow: hidden;
  background-color: #ffffff;
  margin-bottom: 20rpx;

  .order-card-top {
    padding: 20rpx;
    background-color: #44bdf1;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .top-title {
      display: flex;
      align-items: center;

      .title {
        font-size: 30rpx;
        font-weight: bold;
        margin-left: 6rpx;
        color: #ffffff;
      }
    }

    .goods-qty {
      font-size: 28rpx;
      font-weight: bold;
      color: #ffffff;
    }
  }

  .line-list {
    padding: 0 20rpx;

    .line-item {
      padding: 20rpx 0;
      border-bottom: 2rpx solid #f0f0f0;
      display: flex;
      justify-content: space-between;

      .line-item-right {
        margin-left: 20rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 1;
        padding: 10rpx 0;

        .goods-name {
          font-size: 30rpx;
          font-weight: bold;
          margin-bottom: 10rpx;
        }

        .price {
          font-size: 32rpx;
          font-weight: bold;
          color: #ff0000;
        }

        .goods-qty {
          font-size: 24rpx;
          color: #999999;
        }
      }
    }

    & .line-item:last-child {
      border-bottom: 0;
    }
  }

  .more-btn {
    color: #3cb9ef;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20rpx 0;

    .more-icon {
      margin-left: 10rpx;
      transition: all ease 0.5s;

      &.open {
        transform: rotateZ(-180deg);
      }
    }
  }

  .order-notes {
    border-top: 2rpx solid #f0f0f0;
    padding: 20rpx;

    .notes-title {
      font-size: 30rpx;
      font-weight: bold;
      margin-bottom: 20rpx;
    }
  }
}

.actions {
  display: flex;
  align-items: center;
  padding: 20rpx 20rpx calc(20rpx + env(safe-area-inset-bottom));
  box-sizing: border-box;
  background-color: #fff;
  gap: 20rpx;
}
</style>
